<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8">
   <title></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <!--====== Favicon Icon ======-->
   <link rel="shortcut icon" href="/images/favicon.png" type="image/png">

   <!--====== Bootstrap CSS ======-->
   <link rel="stylesheet" href="/css/bootstrap.min.css">
   <link rel="stylesheet" href="/font/bootstrap-icons.css">

   <link rel="stylesheet" href="/css/newStyle.css">

   <link rel="stylesheet" href="/css/new.css">
</head>
<body>
   <div th:insert="common/header :: header"></div>
   <section>
      <div class="ai-contain">
         <div class="main">
            <div class="left" id="left">
               <input type="hidden" id="newsId" th:value="${newsId}">
               <!-- 左侧主要内容 大赛视频 -->
               <div class="l-content" id="content">
<!--                  <div class="c-title c-title-main">-->
<!--                     <div class="t-t bg-main color-title">大赛新闻</div>-->
<!--                  </div>-->
<!--                  <div class="c-content">-->
<!--                     <div class="news-list" id="list">-->
<!--                        <a href="http://www.baidu.com" target="_blank">-->
<!--                           <div class="l-group">-->
<!--                              <div><img src="/images/news/photo1.jpg" width="200px"></div>-->
<!--                              <div class="l-item">-->
<!--                                 <div class="i-title">青少年人工智能创新大赛在蓉举行</div>-->
<!--                                 <div class="i-time">2024-10-10</div>-->
<!--                              </div>-->
<!--                           </div>-->
<!--                        </a>-->
<!--                        <div class="l-line"></div>-->
<!--                        <a style="width: 100%">-->
<!--                           <div class="l-group-no">-->
<!--                              <div class="n-title">重要通知：第四届中国人工智能大赛报名时间延长至3月31日</div>-->
<!--                              <div class="n-time">2024-10-10</div>-->
<!--                           </div>-->
<!--                        </a>-->
<!--                        <div style="border-bottom: 1px var(&#45;&#45;line-light) solid"></div>-->
<!--                        <a style="width: 100%">-->
<!--                           <div style="margin: 20px 0;display: flex;justify-content: space-between;">-->
<!--                              <div style="font-size: 20px;color: var(&#45;&#45;secondary-color-dark)">最高奖金10万元！首届全国“人工智能+”行业应用创新大赛报名火爆</div>-->
<!--                              <div style="line-height: 32px;">2024-10-10</div>-->
<!--                           </div>-->
<!--                        </a>-->
<!--                        <div style="border-bottom: 1px var(&#45;&#45;line-light) solid"></div>-->
<!--                        <a style="width: 100%">-->
<!--                           <div style="margin: 20px 0;display: flex;justify-content: space-between;">-->
<!--                              <div style="font-size: 20px;color: var(&#45;&#45;secondary-color-dark)">22支队伍获奖、多项创新成果发布</div>-->
<!--                              <div style="line-height: 32px;">2024-10-10</div>-->
<!--                           </div>-->
<!--                        </a>-->
<!--                     </div>-->
<!--                  </div>-->
               </div>
            </div>
            <div class="right" id="right">
<!--               <div class="r-box">-->
<!--                  <div class="c-title">-->
<!--                     <div class="t-t">大赛推荐</div>-->
<!--                  </div>-->
<!--                  <div style="padding:10px;">-->
<!--                     <div>-->
<!--                        <div><img src="/images/news/tj1.jpg" class="d-block w-100" alt="图片3"></div>-->
<!--                        <div class="text-center" style="line-height: 45px;color: #222222;">人工智能你需要知道的101件事</div>-->
<!--                     </div>-->
<!--                  </div>-->
<!--               </div>-->
            </div>
         </div>
      </div>
   </section>

   <!-- ICP备案信息 -->
   <div th:insert="common/footer :: footer"></div>

   <!--====== Jquery js ======-->
   <script src="/js/jquery-1.12.4.min.js"></script>
   <script src="/js/bootstrap.min.js"></script>
   <!--====== layerUI js ======-->
   <script src="/js/layui/layui.js"></script>
   <script src="/js/common.js"></script>
   <script src="/js/index.js"></script>
   <script>
      rightHtml();
      layui.use(function(){
         let typeName = '';
         if($('#newsId').val() == 1){
            typeName = '大赛新闻';
         }else if($('#newsId').val() == 2){
            typeName = '大赛通知';
         }else if($('#newsId').val() == 3){
            typeName = '大赛动态';
         }
         $.ajax({
            url: '/news/pagination?typeQuery=' + $('#newsId').val(),
            type: 'GET',
            success: function (data) {
               // 清空动态内容
               $('#content').empty();
               // 根据获取到的数据重新构建表格内容
               let contentHtml = '<div class="c-title c-title-main">' +
                       '            <div class="t-t bg-main color-title">' + typeName + '</div>' +
                       '         </div>' +
                       '         <div class="c-content">' +
                       '            <div class="news-list" id="list">';
               data.data.records.forEach(function (info) {
                  if(info.images!=null && info.images != ''){
                     // if(info.title.length>40){
                     //    info.title = info.title.substring(0, 40) + '...';
                     // }
                     contentHtml += '<a href="/uis/detailUI?id=' + info.id + '" target="_blank">' +
                             '                           <div class="l-group">' +
                             '                              <div style="width: 200px;"><img src="' + imagesUrl + info.images + '" width="200px" height="112px"></div>' +
                             '                              <div class="l-item">' +
                             '                                 <div class="i-title">' + info.title + '</div>' +
                             '                                 <div class="i-time">' + info.createTimeName1 + '</div>' +
                             '                              </div>' +
                             '                           </div>' +
                             '                        </a>' +
                             '      <div class="l-line"></div>';
                  }else{
                     if(info.title.length>30){
                        info.title = info.title.substring(0, 30) + '...';
                     }
                     contentHtml += '<a href="/uis/detailUI?id=' + info.id + '" target="_blank" style="width: 100%">' +
                             '           <div class="l-group-no">' +
                             '              <div class="n-title">' + info.title + '</div>' +
                             '              <div class="n-time">' + info.createTimeName1 + '</div>' +
                             '           </div>' +
                             '       </a>' +
                             '      <div class="l-line"></div>';
                  }
               })
               contentHtml += '</div></div>';
               $('#content').html(contentHtml);
            },
            error: function (error) {
               layer.msg('获取数据失败：' + error.responseText);
            }
         });
      });
   </script>
</body>
</html>
